<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
	<title>彩页管理</title>
	<script>
		$(document).ready(function() {
			//聚焦第一个输入框
			$("#profile_number").focus();
			//为inputCompanyForm注册validate函数
			$("#inputProfileForm").validate();
			$("#addcs_btn").click(addcs_btn_click);
			$("#addcs_submit_btn").click(addcs_submit_btn_click);
			$("#company_standard").change(company_standard_change);
			$("#company_category").change(company_category_change);
		});
		function addcs_btn_click(){
			$.post(
				'${ctx}/company/getEnabledCompanyCategoryStandard',
				function(data) {
					$("#company_standard").empty();
					$.each(data, function(key, value){      
						$("#company_standard").append("<option value='" + key + "'>" + value +"</option>");
					});
					$("#company_standard").get(0).selectedIndex=0;
					company_standard_change();
			});
		}
		function company_standard_change(){
			var checkValue=$("#company_standard").val();
			if(checkValue){
				$.ajax({
					url:'${ctx}/company/getEnabledCompanyCategoryByStd/'+checkValue, 
					success:function(data) {
						$("#company_category").empty();
						$("#company_self").empty();
						$.each(data, function(key, value){
							$("#company_category").append("<option value='" + key + "'>" + value +"</option>");
						});
						$("#company_category").get(0).selectedIndex=0;
						company_category_change();
				}});
			}
		}
		function company_category_change(){
			var checkValue=$("#company_category").val();
			if(checkValue){
				$.post(
						'${ctx}/company/getEnabledCompanyByCategory/'+checkValue,
						{exludeIdList:filter_companys()},
						function(data) {
							$("#company_self").empty();
							$.each(data, function(key, value){
								$("#company_self").append("<option value='" + key + "'>" + value +"</option>");
							});
							$("#companys_alert").show();
					});
			}
		}
		function addcs_submit_btn_click(){
			var checkCompanyValue=$("#company_self").val(),
				checkCompanyText=$("#company_self").find("option:selected").text(),
			 	len = $("#companys tr").length,
			 	index = len - 1,
			 	hiddenInput = '<td style="display:none"><input type="text" name="companys['+ index + '].id" value="'+checkCompanyValue+'"/></td>';
			 	
			if(!checkCompanyValue || checkCompanyValue == ''){
				alert('选择的客户不能为空。');
				return;
			} 	
	        var rowTemplate = '<tr id="cc_'+ index +'"><td>'+checkCompanyText+'</td><td><a href="#" onclick="delRow('+index+')">删除</a></td>'+hiddenInput+'</tr>';
	        var tableHtml = $("#companys tbody").html();
	        tableHtml += rowTemplate;
	        $("#companys tbody").html(tableHtml);
	        $('#companys_alert').hide();
		}
	   	function delRow(row_id){
	   		//删除当前行
			$("tr[id='cc_"+row_id+"']").remove();
		}
	   	function filter_companys(){
	   		var csArray = $('input[name="^companys"]'),
	   			ids = new Array();
	   		if(csArray){
		   		$.each(csArray, function(i, cs){
					ids.push(cs.value);
				});
	   		}
			return ids;
	   	}
	</script>
</head>

<body>
	<form id="inputProfileForm" action="${ctx}/profile/${action}" method="post" class="form-horizontal">
		<input type="hidden" name="id" value="${profile.id}"/>
		<fieldset>
			<legend><small>管理彩页</small></legend>
			<div class="control-group">
				<label for="profile_number" class="control-label">彩页编码:</label>
				<div class="controls">
					<input type="text" id="profile_number" name="number" value="${profile.number}" class="input-large required" minlength="3"/>
				</div>
			</div>	
			<div class="control-group">
				<label for="profile_name" class="control-label">彩页名称:</label>
				<div class="controls">
					<input type="text" id="profile_name" name="name" value="${profile.name}" class="input-large required" minlength="3"/>
				</div>
			</div>
			<div class="control-group">
				<table id="companys" class="table table-striped table-bordered table-condensed">
					<thead><tr><th>客户</th><th>操作</th></tr></thead>
					<tbody>
						<c:forEach var="company" items="${profile.companys}" varStatus="loopStatus">
								<tr id="cc_${loopStatus.index}">
									<td>${company.name}</td>
									<td><a href="#" onclick="delRow(${loopStatus.index})">删除</a></td>
									<td style="display:none">
										<spring:bind path="profile.companys[${loopStatus.index}]">
											<input type="text" name="${status.expression}.id" value="${status.value.id}" />
										</spring:bind>
									</td>
								</tr>
							
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div id="companys_alert" class="alert alert-info" style="display:none">
				<div class="control-group">
					<label for="company_standard" class="control-label">客户分类标准:</label>
					<div class="controls">
					<select id="company_standard"></select>
					</div>
				</div>
				<div class="control-group">
					<label for="company_standard" class="control-label">客户分类:</label>
					<div class="controls">
						<select id="company_category"></select>
					</div>
				</div>
				<div class="control-group">
					<label for="company_self" class="control-label">客户:</label>
					<div class="controls">
						<select id="company_self"></select>
					</div>
				</div>
				<div class="form-actions">
					<input id="addcs_submit_btn" class="btn btn-primary" type="button" value="确定"/>&nbsp;
					<input id="addcs_cancel_btn" class="btn" type="button" value="取消" onclick="$('#companys_alert').hide()"/>
				</div>
			</div>
			
			
			
			<div class="control-group">
				<label for="profile_remark" class="control-label">备注:</label>
				<div class="controls">
					<textarea id="profile_remark" name="remark" class="input-large">${profile.remark}</textarea>
				</div>
			</div>
			<div class="form-actions">
				<input id="submit_btn" class="btn btn-primary" type="submit" value="提交"/>&nbsp;	
				<input id="cancel_btn" class="btn" type="button" value="返回" onclick="history.back()"/>&nbsp;
				<input id="addcs_btn" class="btn" type="button" value="新增客户关系"/>
			</div>
		</fieldset>
	</form>
</body>
</html>